<template>
  <div>
    <el-row  v-loading="tableLoading">
       <el-col :span="18">
      <el-form ref="elForm"
       :model="formData"
        :rules="rules"
         label-suffix="："
         size="medium"
          label-width="30%">
        <el-col :span="24">
          <el-form-item label="猎鹰浏览器IOS版本号" prop="vers">
            <el-input v-model="formData.vers" placeholder="请输入版本号" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
              <h3 style="margin-top:0" class="form-section-title">腾讯开屏广告</h3>
        </el-col>
        <el-col :span="24">
          <el-form-item label="打开腾讯开屏广告" prop="txopen" required>
            <el-switch v-model="formData.txopen"></el-switch>
          </el-form-item>

          <el-form-item label="腾讯开屏广告ID" prop="txid">
            <el-input v-model="formData.txid" placeholder="请输入腾讯开屏广告ID" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>        
         
          <el-form-item label="每千次/分" prop="bidecpm">
            <el-input v-model="formData.bidecpm" placeholder="请输入每千次/分" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>  
        <el-form-item label="排序" prop="txorder">
            <el-input v-model="formData.txorder" placeholder="请输入排序" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        
        </el-col>
        <!--  -->
         <el-col :span="24">
              <h3 style="margin-top:0" class="form-section-title">穿山甲开屏广告</h3>
        </el-col>

        <el-col :span="24">
          <el-form-item label="打开穿山甲开屏广告" prop="csopen" required>
            <el-switch v-model="formData.csopen"></el-switch>
          </el-form-item>
         
          <el-form-item label="穿山甲广告ID" prop="csid">
            <el-input v-model="formData.csid" placeholder="请输入穿山甲广告ID" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="排序" prop="csorder">
            <el-input v-model="formData.csorder" placeholder="请输入排序" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        
        </el-col>
           <el-col :span="24">
              <h3 style="margin-top:0" class="form-section-title">百度开屏广告</h3>
        </el-col>
        <el-col :span="24">
          <el-form-item label="打开百度开屏广告" prop="bdopen" required>
            <el-switch v-model="formData.bdopen"></el-switch>
          </el-form-item>
        
          <el-form-item label="百度广告ID" prop="bdid">
            <el-input v-model="formData.bdid" placeholder="请输入百度广告ID" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="排序" prop="bdorder">
            <el-input v-model="formData.bdorder" placeholder="请输入排序" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
       
        </el-col>
        <!-- Redis设置-->
        <el-col :span="24">
    <h3 style="margin-top:0" class="form-section-title">Redis设置</h3>
        </el-col>
    <el-col :span="24">
     <el-form-item label="存储的KEY值" prop="cacheId">   
         <el-input v-model="formData.cacheId"  clearable :style="{width: '100%'}">
        </el-input>        
    </el-form-item>
    <el-form-item label="服务器链接参数" prop="redisStr">
   
    <el-input v-model="formData.redisStr" placeholder="包括IP@PORT@PW" clearable :style="{width: '100%'}">
        </el-input>
      
    </el-form-item>
    </el-col>
    <!--  -->
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交保存</el-button>
            <!-- <el-button @click="resetForm">重置</el-button> -->
          </el-form-item>
        </el-col>
      </el-form>
       </el-col>  
    </el-row>
  </div>
</template>
<script>
import PlaceAPI from "../Place/PlaceAPI.js";
//
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        vers: undefined,
        txopen: true,
        txorder: undefined,
        txid: undefined,
        bidecpm: undefined,
        csopen: true,
        csorder: undefined,
        csid: undefined,
        bdopen: true,
        bdorder: undefined,
        bdid: undefined,
        cacheId: "lybrower-ios-adverte-setting",
        redisStr: "127.0.0.1@6379",
      },
      tableLoading:false,
      rules: {
        vers: [{
          required: true,
          message: '请输入版本号',
          trigger: 'blur'
        }],
        txorder: [{
          required: true,
          message: '请输入排序',
          trigger: 'blur'
        }],
        txid: [{
          required: true,
          message: '请输入腾讯开屏广告ID',
          trigger: 'blur'
        }],
        bidecpm: [{
          required: true,
          message: '请输入每千次/分',
          trigger: 'blur'
        }],
        csorder: [{
          required: true,
          message: '请输入排序',
          trigger: 'blur'
        }],
        csid: [{
          required: true,
          message: '请输入穿山甲广告ID',
          trigger: 'blur'
        }],
        bdorder: [{
          required: true,
          message: '请输入排序',
          trigger: 'blur'
        }],
        bdid: [{
          required: true,
          message: '请输入百度广告ID',
          trigger: 'blur'
        }],
        cacheId: [{
          required: true,
          message: '请输入reids缓存的Key值',
          trigger: 'blur'
        }],
        redisStr: [{
          required: true,
          message: '请输入redis服务器参数',
          trigger: 'blur'
        }],
      },
    }
  },
  computed: {},
  watch: {},
  created() {
     this.tableLoading = true;
    PlaceAPI.getLybrowerjson().then( (response)=>{
      this.tableLoading = false;
      if(!response) return;
      var data = response.json;
       if(!data) return;
       //===
      this.formData.cacheId = response.cacheId;
      this.formData.redisStr = response.redisStr;
      this.formData.vers = data.vers;
      for(var i in data.ads){
          this.formData[data.ads[i]['name'] + 'id'] = data.ads[i]['id'];
          this.formData[data.ads[i]['name'] + 'open'] = data.ads[i]['open']==1 ? true: false;
          this.formData[data.ads[i]['name'] + 'order'] = data.ads[i]['order'];
          if(data.ads[i].hasOwnProperty('bidecpm')){
            this.formData['bidecpm'] = data.ads[i]['bidecpm'];
          }
      }
      
    })
  },
  mounted() {},
  methods: {
    submitForm() {
       this.$refs['elForm'].validate(valid => {
        if (!valid) return
        //console.log(this.formData)
        this.tableLoading = true;
        // TODO 提交表单
        PlaceAPI.saveLybrowerJson(this.formData).then((data)=>{
          this.tableLoading = false;
          if(data.result =='error'){
            this.$message({ message: data.message, type: "error" })
          }else{
            this.$message({ message: "提交保存成功", type: "success" })
          }
          
        });
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
</style>
